<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "../..",
        "title": "Pixel Documentation - Accordions"
    })
</head>

<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <svg class="icon fill-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z" />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "../..",
                "docs-path": ".."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-3 py-md-5">
                        <div class="border-bottom">
                            <h1>Accordions</h1>
                            <p class="lead text-dark">Use accordions to show content when clicking on a tab element.
                            </p>
                        </div>
                        <div id="default-accordions" class="my-5">
                            <h5 class="mb-3">Default accordions</h5>
                            <p>Use the <code class="text-danger">.accordion-panel-header</code> element and add the id of the targeted element to <code class="text-danger">href</code>, <code class="text-danger">data-target</code> and <code class="text-danger">aria-controls</code>                                attributes.</p>
                            <p>The element that will be toggled is the <code class="text-danger">.collapse</code> from the following example:</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-text-alerts" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-text-1-tab" data-toggle="tab" href="#tabs-text-1" role="tab" aria-controls="tabs-text-1" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-2-tab" data-toggle="tab" href="#tabs-text-2" role="tab" aria-controls="tabs-text-2" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body">
                                        <div class="tab-content" id="tabcontent1">
                                            <div class="tab-pane fade show active" id="tabs-text-1" role="tabpanel" aria-labelledby="tabs-text-1-tab">
                                                <!--Accordion-->
                                                <div class="accordion" id="accordionExample1">
                                                    <div class="card card-sm card-body shadow-sm border-soft">
                                                        <a href="#panel-1" data-target="#panel-1" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1">
                                                            <span class="h6 mb-0 font-weight-bold">Our Company</span>
                                                            <span class="icon"><i class="fas fa-plus"></i></span>
                                                        </a>
                                                        <div class="collapse" id="panel-1">
                                                            <div class="pt-3">
                                                                <p class="mb-0">
                                                                    At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also
                                                                    helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card card-sm card-body shadow-sm border-soft">
                                                        <a href="#panel-2" data-target="#panel-2" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1">
                                                            <span class="h6 mb-0 font-weight-bold">Neumorphism Components</span>
                                                            <span class="icon"><i class="fas fa-plus"></i></span>
                                                        </a>
                                                        <div class="collapse" id="panel-2">
                                                            <div class="pt-3">
                                                                <p class="mb-0">
                                                                    At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also
                                                                    helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision. </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card card-sm card-body shadow-sm border-soft">
                                                        <a href="#panel-3" data-target="#panel-3" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1">
                                                            <span class="h6 mb-0 font-weight-bold">Licenses</span>
                                                            <span class="icon"><i class="fas fa-plus"></i></span>
                                                        </a>
                                                        <div class="collapse" id="panel-3">
                                                            <div class="pt-3">
                                                                <p class="mb-0">
                                                                    At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also
                                                                    helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision. </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--End of Accordion-->
                                            </div>
                                            <div class="tab-pane fade" id="tabs-text-2" role="tabpanel" aria-labelledby="tabs-text-2-tab">
                                                <div>
                                                    <pre class="bg-white">
                                                        <code class="language-html">
&#x3C;div class=&#x22;accordion&#x22; id=&#x22;accordionExample1&#x22;&#x3E;
    &#x3C;div class=&#x22;card card-sm card-body shadow-sm border-soft&#x22;&#x3E;
        &#x3C;a href=&#x22;#panel-1&#x22; data-target=&#x22;#panel-1&#x22; class=&#x22;accordion-panel-header&#x22;
            data-toggle=&#x22;collapse&#x22; role=&#x22;button&#x22; aria-expanded=&#x22;false&#x22;
            aria-controls=&#x22;panel-1&#x22;&#x3E;
            &#x3C;span class=&#x22;h6 mb-0 font-weight-bold&#x22;&#x3E;Our Company&#x3C;/span&#x3E;
            &#x3C;span class=&#x22;icon&#x22;&#x3E;&#x3C;i class=&#x22;fas fa-plus&#x22;&#x3E;&#x3C;/i&#x3E;&#x3C;/span&#x3E;
        &#x3C;/a&#x3E;
        &#x3C;div class=&#x22;collapse&#x22; id=&#x22;panel-1&#x22;&#x3E;
            &#x3C;div class=&#x22;pt-3&#x22;&#x3E;
                &#x3C;p class=&#x22;mb-0&#x22;&#x3E;
                    At Themesberg, our mission has always been focused
                    on bringing openness and
                    transparency to the design process. We&#x27;ve always
                    believed that by providing
                    a space where designers can share ongoing work not
                    only empowers them to
                    make better products, it also helps them grow.
                    We&#x27;re proud to be a part of
                    creating a more open culture and to continue
                    building a product that
                    supports this vision.
                &#x3C;/p&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;div class=&#x22;card card-sm card-body shadow-sm border-soft&#x22;&#x3E;
        &#x3C;a href=&#x22;#panel-2&#x22; data-target=&#x22;#panel-2&#x22; class=&#x22;accordion-panel-header&#x22;
            data-toggle=&#x22;collapse&#x22; role=&#x22;button&#x22; aria-expanded=&#x22;false&#x22;
            aria-controls=&#x22;panel-1&#x22;&#x3E;
            &#x3C;span class=&#x22;h6 mb-0 font-weight-bold&#x22;&#x3E;Neumorphism Components&#x3C;/span&#x3E;
            &#x3C;span class=&#x22;icon&#x22;&#x3E;&#x3C;i class=&#x22;fas fa-plus&#x22;&#x3E;&#x3C;/i&#x3E;&#x3C;/span&#x3E;
        &#x3C;/a&#x3E;
        &#x3C;div class=&#x22;collapse&#x22; id=&#x22;panel-2&#x22;&#x3E;
            &#x3C;div class=&#x22;pt-3&#x22;&#x3E;
                &#x3C;p class=&#x22;mb-0&#x22;&#x3E;
                    At Themesberg, our mission has always been focused
                    on bringing openness and
                    transparency to the design process. We&#x27;ve always
                    believed that by providing
                    a space where designers can share ongoing work not
                    only empowers them to
                    make better products, it also helps them grow.
                    We&#x27;re proud to be a part of
                    creating a more open culture and to continue
                    building a product that
                    supports this vision. &#x3C;/p&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;div class=&#x22;card card-sm card-body shadow-sm border-soft&#x22;&#x3E;
        &#x3C;a href=&#x22;#panel-3&#x22; data-target=&#x22;#panel-3&#x22; class=&#x22;accordion-panel-header&#x22;
            data-toggle=&#x22;collapse&#x22; role=&#x22;button&#x22; aria-expanded=&#x22;false&#x22;
            aria-controls=&#x22;panel-1&#x22;&#x3E;
            &#x3C;span class=&#x22;h6 mb-0 font-weight-bold&#x22;&#x3E;Licenses&#x3C;/span&#x3E;
            &#x3C;span class=&#x22;icon&#x22;&#x3E;&#x3C;i class=&#x22;fas fa-plus&#x22;&#x3E;&#x3C;/i&#x3E;&#x3C;/span&#x3E;
        &#x3C;/a&#x3E;
        &#x3C;div class=&#x22;collapse&#x22; id=&#x22;panel-3&#x22;&#x3E;
            &#x3C;div class=&#x22;pt-3&#x22;&#x3E;
                &#x3C;p class=&#x22;mb-0&#x22;&#x3E;
                    At Themesberg, our mission has always been focused
                    on bringing openness and
                    transparency to the design process. We&#x27;ve always
                    believed that by providing
                    a space where designers can share ongoing work not
                    only empowers them to
                    make better products, it also helps them grow.
                    We&#x27;re proud to be a part of
                    creating a more open culture and to continue
                    building a product that
                    supports this vision. &#x3C;/p&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="icons" class="my-5">
                            <h5 class="mb-3">Accordions with icons</h5>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-text-dismissible" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-text-3-tab" data-toggle="tab" href="#tabs-text-3" role="tab" aria-controls="tabs-text-3" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-4-tab" data-toggle="tab" href="#tabs-text-4" role="tab" aria-controls="tabs-text-4" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body">
                                        <div class="tab-content" id="tabcontent2">
                                            <div class="tab-pane fade show active" id="tabs-text-3" role="tabpanel" aria-labelledby="tabs-text-3-tab">
                                                <div class="accordion">
                                                    <div class="card card-sm card-body shadow-sm border-soft">
                                                        <a href="#panel-4" data-target="#panel-4" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1">
                                                            <span class="icon-title h6 mb-0 font-weight-bold"><i class="fab fa-leanpub"></i>Our
                                                                Company</span>
                                                            <span class="icon"><i class="fas fa-plus"></i></span>
                                                        </a>
                                                        <div class="collapse" id="panel-4">
                                                            <div class="pt-3">
                                                                <p class="mb-0">
                                                                    At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also
                                                                    helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card card-sm card-body shadow-sm border-soft">
                                                        <a href="#panel-5" data-target="#panel-5" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1">
                                                            <span class="icon-title h6 mb-0 font-weight-bold"><i class="fas fa-box-open"></i>Pixel
                                                                Components</span>
                                                            <span class="icon"><i class="fas fa-plus"></i></span>
                                                        </a>
                                                        <div class="collapse" id="panel-5">
                                                            <div class="pt-3">
                                                                <p class="mb-0">
                                                                    At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also
                                                                    helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision. </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card card-sm card-body shadow-sm border-soft">
                                                        <a href="#panel-6" data-target="#panel-6" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1">
                                                            <span class="icon-title h6 mb-0 font-weight-bold"><i class="fas fa-donate"></i>Licenses</span>
                                                            <span class="icon"><i class="fas fa-plus"></i></span>
                                                        </a>
                                                        <div class="collapse" id="panel-6">
                                                            <div class="pt-3">
                                                                <p class="mb-0">
                                                                    At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also
                                                                    helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision. </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tabs-text-4" role="tabpanel" aria-labelledby="tabs-text-4-tab">
                                                <div>
                                                    <pre class="bg-white">
                                                    <code class="language-html">
&#x3C;div class=&#x22;accordion&#x22;&#x3E;
    &#x3C;div class=&#x22;card card-sm card-body shadow-sm border-soft&#x22;&#x3E;
        &#x3C;a href=&#x22;#panel-4&#x22; data-target=&#x22;#panel-4&#x22; class=&#x22;accordion-panel-header&#x22; data-toggle=&#x22;collapse&#x22;
            role=&#x22;button&#x22; aria-expanded=&#x22;false&#x22; aria-controls=&#x22;panel-1&#x22;&#x3E;
            &#x3C;span class=&#x22;icon-title h6 mb-0 font-weight-bold&#x22;&#x3E;&#x3C;i class=&#x22;fab fa-leanpub&#x22;&#x3E;&#x3C;/i&#x3E;Our
                Company&#x3C;/span&#x3E;
            &#x3C;span class=&#x22;icon&#x22;&#x3E;&#x3C;i class=&#x22;fas fa-plus&#x22;&#x3E;&#x3C;/i&#x3E;&#x3C;/span&#x3E;
        &#x3C;/a&#x3E;
        &#x3C;div class=&#x22;collapse&#x22; id=&#x22;panel-4&#x22;&#x3E;
            &#x3C;div class=&#x22;pt-3&#x22;&#x3E;
                &#x3C;p class=&#x22;mb-0&#x22;&#x3E;
                    At Themesberg, our mission has always been focused on bringing openness and
                    transparency to the design process. We&#x27;ve always believed that by providing
                    a space where designers can share ongoing work not only empowers them to
                    make better products, it also helps them grow. We&#x27;re proud to be a part of
                    creating a more open culture and to continue building a product that
                    supports this vision.
                &#x3C;/p&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;div class=&#x22;card card-sm card-body shadow-sm border-soft&#x22;&#x3E;
        &#x3C;a href=&#x22;#panel-5&#x22; data-target=&#x22;#panel-5&#x22; class=&#x22;accordion-panel-header&#x22; data-toggle=&#x22;collapse&#x22;
            role=&#x22;button&#x22; aria-expanded=&#x22;false&#x22; aria-controls=&#x22;panel-1&#x22;&#x3E;
            &#x3C;span class=&#x22;icon-title h6 mb-0 font-weight-bold&#x22;&#x3E;&#x3C;i class=&#x22;fas fa-box-open&#x22;&#x3E;&#x3C;/i&#x3E;Pixel
                Components&#x3C;/span&#x3E;
            &#x3C;span class=&#x22;icon&#x22;&#x3E;&#x3C;i class=&#x22;fas fa-plus&#x22;&#x3E;&#x3C;/i&#x3E;&#x3C;/span&#x3E;
        &#x3C;/a&#x3E;
        &#x3C;div class=&#x22;collapse&#x22; id=&#x22;panel-5&#x22;&#x3E;
            &#x3C;div class=&#x22;pt-3&#x22;&#x3E;
                &#x3C;p class=&#x22;mb-0&#x22;&#x3E;
                    At Themesberg, our mission has always been focused on bringing openness and
                    transparency to the design process. We&#x27;ve always believed that by providing
                    a space where designers can share ongoing work not only empowers them to
                    make better products, it also helps them grow. We&#x27;re proud to be a part of
                    creating a more open culture and to continue building a product that
                    supports this vision. &#x3C;/p&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
    &#x3C;div class=&#x22;card card-sm card-body shadow-sm border-soft&#x22;&#x3E;
        &#x3C;a href=&#x22;#panel-6&#x22; data-target=&#x22;#panel-6&#x22; class=&#x22;accordion-panel-header&#x22; data-toggle=&#x22;collapse&#x22;
            role=&#x22;button&#x22; aria-expanded=&#x22;false&#x22; aria-controls=&#x22;panel-1&#x22;&#x3E;
            &#x3C;span class=&#x22;icon-title h6 mb-0 font-weight-bold&#x22;&#x3E;&#x3C;i class=&#x22;fas fa-donate&#x22;&#x3E;&#x3C;/i&#x3E;Licenses&#x3C;/span&#x3E;
            &#x3C;span class=&#x22;icon&#x22;&#x3E;&#x3C;i class=&#x22;fas fa-plus&#x22;&#x3E;&#x3C;/i&#x3E;&#x3C;/span&#x3E;
        &#x3C;/a&#x3E;
        &#x3C;div class=&#x22;collapse&#x22; id=&#x22;panel-6&#x22;&#x3E;
            &#x3C;div class=&#x22;pt-3&#x22;&#x3E;
                &#x3C;p class=&#x22;mb-0&#x22;&#x3E;
                    At Themesberg, our mission has always been focused on bringing openness and
                    transparency to the design process. We&#x27;ve always believed that by providing
                    a space where designers can share ongoing work not only empowers them to
                    make better products, it also helps them grow. We&#x27;re proud to be a part of
                    creating a more open culture and to continue building a product that
                    supports this vision. &#x3C;/p&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#default-accordions" class="nav-link " data-smooth-scroll>Default</a>
                            </li>
                            <li class="nav-item">
                                <a href="#icons" class="nav-link " data-smooth-scroll>Icons</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../.."
    })
</body>

</html>